<template>
  <h1>业务1：坐标</h1>
  <p>x: {{ mouse.x }}</p>
  <p>y: {{ mouse.y }}</p>
  <hr />
  <h2>{{ number }}</h2>
  <button @click="btn(10)">点击加10</button>
</template>

<script>
import { onMounted, onUnmounted, reactive, ref } from 'vue'

export default {
  name: 'App',
  setup() {
    // 🔔 业务1：获取鼠标坐标
    // 定义响应式对象数据
    const mouse = reactive({ x: 0, y: 0 })

    const fn = e => {
      // console.log(e)
      mouse.x = e.clientX
      mouse.y = e.clientY
    }

    onMounted(() => {
      // 事件绑定到了 document 上，卸载的时候 document 的时间默认还在，所以需要主动在卸载时，移除事件
      document.addEventListener('mousemove', fn)
    })

    onUnmounted(() => {
      // 要主动在卸载时，主动移除事件
      document.removeEventListener('mousemove', fn)
    })

    // 🔔 业务2：计数器
    const number = ref(0)
    const btn = val => {
      number.value += val
    }

    // setup 里面的 return 是返回给模板使用的
    return { number, btn, mouse }
  },
}
</script>

<style></style>